import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageRouter from '@/components/PageRouter/PageRouter';
import React, { useEffect, memo } from 'react';
import { Dropdown, Icon, Menu, Typography } from 'antd';
import { connect } from 'umi';
import { history } from 'umi'
import SalaryConfigTipPage from '@/pages/SalaryManage/components/SalaryConfigTipPage';

const Wrapper = ({ itemMenus = [], children, dispatch }) => {
    useEffect(() => {
        // 加载菜单
        if (!itemMenus || itemMenus.length === 0) {
            dispatch({ type: 'itemMenuModel/fetchItemMenus' });
        }
    }, []);

    const gotoPage = item => {
        dispatch({
            type: 'itemMenuModel/selectItemId',
            payload: item.id,
            callback() {
                dispatch({
                    type: 'itemMenuModel/fetchItemMenus',
                    payload: item.id,
                    callback() {
                        history.push({
                            pathname: '/finance/salary/calculate/recheck/itemrecheck',
                            state: {
                                tabRoute: true,
                                tabRefresh: true
                            }
                        });
                    }
                });
            }
        });
    };

    const itemMenu =
        itemMenus.length > 0 ? (
            <Dropdown
                overlay={
                    <Menu>
                        {itemMenus.map(it => (
                            <Menu.Item key={it.id} onClick={() => gotoPage(it)}>
                                {it.itemName}
                            </Menu.Item>
                        ))}
                    </Menu>
                }
            >
                <Typography.Text style={{ paddingBottom: 16 }} onClick={e => e.stopPropagation()}>
                    细项复核
                    <Icon type="down" style={{ marginLeft: 10 }} />
                </Typography.Text>
            </Dropdown>
        ) : null;

    return (
        <PageHeaderWrapper>
            <PageRouter type="salaryRecheck" tabNameMapper={{ itemRecheck: itemMenu }}>
                <SalaryConfigTipPage>{children}</SalaryConfigTipPage>
            </PageRouter>
        </PageHeaderWrapper>
    );
};

const ConnectWrapper = memo(
    connect(({ itemMenuModel }) => ({
        itemMenus: itemMenuModel.itemMenus
    }))(Wrapper)
);

export default ConnectWrapper;
